<template>
  <div class="app-container">
    <!-- 顶部搜索 -->
    <el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" label-width="120px">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="归集项目:" prop="xmName" @focus="selectKt">
            <el-input v-model="xmName" placeholder="请选择科研项目" clearable @focus="selectKt()"
                      :suffix-icon="'el-icon-search'"/>
          </el-form-item>
          <el-form-item v-if="1 === 2" label="项目申报ID:" prop="xmsbId">
            <el-input
              v-model="queryParams.xmsbId"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="归集年度:" prop="nd">
            <el-select v-model="queryParams.nd" placeholder="请选择年度" clearable>
              <el-option
                v-for="dict in dict.type.year"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="归集月份:" prop="gjYf">
<!--            <el-select @change="updateGjYf" multiple v-model="queryParams.gjYf" placeholder="请选择归集月份" clearable>-->
<!--              <el-option-->
<!--                v-for="dict in dict.type.yf"-->
<!--                :key="dict.value"-->
<!--                :label="dict.label"-->
<!--                :value="dict.value"-->
<!--              />-->
<!--            </el-select>-->
            <vxe-select @change="updateGjYf" style="width: 100%;" v-model="queryParams.gjYf" placeholder="请选择归集月份" clearable multiple>
              <vxe-option v-for="dict in dict.type.yf"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
              />
            </vxe-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 表格数据为空时 -->
    <div v-if="xmgjbList == null"
         style="width: 100%; height: 70vh;display: flex;align-items: center;justify-content:center;">
      <div
        style="margin: auto;display: flex;flex-direction: column;align-items: center;justify-content:center;position: relative">
        <img src="../../../assets/images/stockmarket.png" style="width: 130px;" alt="">
        <el-button @click="selectKt"
                   style="background: #CC9966;height: calc(100% - 100px);font-size: 18px;padding: 0 30px;
      border-radius: 3px;line-height: 44px;border: 1px solid #CC9966;color:#fff;margin-top: 50px;text-align: center;position: absolute;top: -1px;
      transition: all 0.3s ease;"
                   onmouseover="this.style.transform='scale(1.1)'; this.style.backgroundColor='#B38855';"
                   onmouseout="this.style.transform='scale(1)'; this.style.backgroundColor='#CC9966';"
        >
          选择项目
        </el-button>
        <div style="color: #cccccc;font-size: 18px;">单击选择项目进行项目归集表查询</div>
      </div>
    </div>

    <!-- 表格数据不为空时 -->
    <div v-if="xmgjbList != null" style="text-align:center; margin-bottom: 10px;">
      <h1 style="font-weight: 600">研发项目可加计扣除研究开发费用情况归集表</h1>
      <span style="font-size: 13px">金额单位：元(列至角分）</span>
    </div>
    <el-table style="width: 80%; max-width: 2000px; margin: 0 auto;" v-if="xmgjbList != null"
              :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
              :data="xmgjbList" ref="xmgjb" :row-class-name="tableRowClassName" :stripe="false">
      <el-table-column label="序号" align="center" prop="xh" width="50"/>
      <el-table-column header-align="center" show-overflow-tooltip label="科目" prop="km"/>
      <el-table-column label="发生额" align="center" prop="fse" width="600"/>
    </el-table>

    <!-- 科研项目选择 -->
    <HtXzKt ref="ktXz"/>

  </div>
</template>

<script>
import {selectXmgjbList} from "@/api/fztz/xmgjb";
import HtXzKt from "@/views/components/ktXz/HtXzKt.vue";
import SelectChecked from "@/components/SelectChecked/SelectChecked.vue";

export default {
  name: "XmGjbCx",
  components: {SelectChecked, HtXzKt},
  dicts: ['yf', 'year'],
  provide() {
    return {
      updateXmsbId: (val) => {
        //科研项目
        this.queryParams.xmsbId = val.xmsbId
        this.xmName = val.ktName
        this.getList()
      }
    }
  },
  data() {
    return {
      xmgjbList: null, //项目归集表 表格数据
      xmName: null, //传过来的项目名称
      // 查询参数
      queryParams: {
        xmsbId: null,
        nd: new Date().getFullYear(),
        gjYf: null
      },
      // 显示搜索条件
      showSearch: true,
      gjYf: '1,2,3,4,5,6,7,8,9,10,11,12', //初始查询全年每个月的发生额
    }
  },
  created() {
  },
  methods: {
    //行内背景颜色
    tableRowClassName: function ({row, rowIndex}) {
      if (!row.xh.includes('.')) {
        return 'warm-rows'
      }
    },
    //更改当前选中的归集月份
    updateGjYf() {
      this.queryParams.gjYf.sort((a, b) => a - b);  // 按数值升序排序
      this.gjYf = this.queryParams.gjYf.join(",");
    },
    getList() {
      // 打开遮罩层
      this.$modal.loading("正在获取数据，请稍后...");
      selectXmgjbList(this.queryParams.xmsbId, this.queryParams.nd, this.gjYf).then(res => {
        this.xmgjbList = res.data
        // 关闭遮罩层
        this.$modal.closeLoading();
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if (this.queryParams.xmsbId == null) {
        this.$modal.alertWarning("请先选择要查看的科研项目!");
        return
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.xmName = null
      this.xmgjbList = null
      // this.handleQuery();
    },
    // 打开选择科研项目弹窗
    selectKt() {
      this.$refs.ktXz.handleOpen();
    },
  }
}
</script>

<style lang="scss">
.warm-rows {
  background-color: #66fdd5 !important;
  font-weight: 700;
  font-size: 13.5px;
}

</style>
